<!-- 文件: src/views/Manage.vue -->
<template>
  <div class="manage-container">
    <h2>房源详情</h2>
    <div class="details-card" v-if="route.query">
      <ul>
        <li>ID: {{ route.query.propertyId }}</li>
        <li>名称: {{ decodeURIComponent(route.query.name || '') }}</li>
        <li>行政区: {{ decodeURIComponent(route.query.district || '') }}</li>
        <li>商圈: {{ decodeURIComponent(route.query.sub_district || '') }}</li>
        <li>平均单价: {{ route.query.avg_unit_price }} 万元/㎡</li>
        <li>平均总价: {{ route.query.avg_total_price }} 万元</li>
        <li>推荐理由: {{ decodeURIComponent(route.query.reason || '') }}</li>
      </ul>
    </div>

    <div class="iframe-grid">
      <div class="iframe-card">
        <h3>房源搜索结果</h3>
        <iframe
          :src="searchUrl"
          title="搜索房源"
          class="iframe-content"
        ></iframe>
      </div>

      <div class="iframe-card">
        <h3>高德地图导航</h3>
        <iframe
          :src="amapUrl"
          title="高德地图"
          class="iframe-content"
        ></iframe>
      </div>
    </div>

    <el-button class="back-button" type="primary" @click="goBack">返回推荐页面</el-button>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

const searchQuery = computed(() => {
  const name = decodeURIComponent(route.query.name || '');
  const district = decodeURIComponent(route.query.district || '');
  const subDistrict = decodeURIComponent(route.query.sub_district || '');
  return `${district} ${subDistrict} ${name}`.trim();
});

const addressQuery = computed(() => {
  const district = decodeURIComponent(route.query.district || '');
  const name = decodeURIComponent(route.query.name || '');
  return `${district}${name}`.trim();
});

const searchUrl = computed(() => {
  return `https://www.bing.com/search?q=${encodeURIComponent(searchQuery.value)}`;
});

const amapUrl = computed(() => {
  return `https://www.amap.com/search?query=${encodeURIComponent(addressQuery.value)}`;
});

const goBack = () => {
  router.push('/profile/myfavorite');
};
</script>

<style scoped>
.manage-container {
  padding: 20px;
}
.details-card {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}
.iframe-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.iframe-card {
  flex: 1 1 45%;
  min-width: 300px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.iframe-card h3 {
  margin: 0;
  padding: 10px;
  background-color: #f0f2f5;
  border-bottom: 1px solid #ddd;
}
.iframe-content {
  width: 100%;
  height: 400px;
  border: none;
}
.back-button {
  margin-top: 30px;
}
</style>